<template>
    <div class="post-list">
        <article v-for="post in list" :key="post._id" class="card mb-3 shadow-sm">
            <div class="card-body">
                <router-link :to="`/article/${post._id}`" class="h4 text-decoration-none">{{ post.title }}</router-link>
                <div class="row my-3 align-items-center">
                    <div v-if="post.image" class="col-3">
                        <img :src="post.image.url" :alt="post.title" class="rounded-lg w-100">
                    </div>
                    <p :class="{ 'col-9': post.image }">{{ post.excerpt }}</p>
                </div>
                <span class="text-muted">{{ post.createdAt }}</span>
            </div>
        </article>
    </div>
</template>

<script lang="ts" setup>
import { defineProps, PropType } from 'vue'
import { PostProps } from '@/utlis/type';
defineProps({
    list: {
        required: true,
        type: Array as PropType<PostProps[]>
    }
})
</script>